<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="http://10.5.21.118/libjs/echarts.min.js"></script>
    <script src="http://10.5.21.118/libjs/jquery-1.11.1.min.js"></script>
    <script src="http://10.5.21.118/libjs/echarts-wordcloud.min.js"></script>
    <style>
     *{
        margin: 0;
        padding: 0;
    }
    div{
        width:100%;
        height: 100%;
        position: absolute;
    }
        </style>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        $.get('kmeans.json').done(function (data) {
                // 填入数据
                alert(data.data);
                myChart.setOption({
							title : {
					text: 'Kmeans 聚类结果分布',
					subtext: 'pjj 20171124'
				},
				tooltip : {
					trigger: 'axis',
					showDelay : 0,
					formatter : function (params) {
						if (params.value.length > 1) {
							return params.seriesName + ' :<br/>'
							   + params.value[0] + 'cm ' 
							   + params.value[1] + 'kg ';
						}
						else {
							return params.seriesName + ' :<br/>'
							   + params.name + ' : '
							   + params.value + 'kg ';
						}
		       },  
					axisPointer:{
						show: true,
						type : 'cross',
						lineStyle: {
							type : 'dashed',
							width : 1
						}
					}
				},
				legend: {
					data:['A类']
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataZoom : {show: true},
						dataView : {show: true, readOnly: false},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				xAxis : [
					{
						type : 'value',
						scale:true,
						axisLabel : {
							formatter: '{value} cm'
						}
					}
				],
				yAxis : [
					{
						type : 'value',
						scale:true,
						axisLabel : {
							formatter: '{value} kg'
						}
					}
				],
				series : [
					{
						name:'A类',
						type:'scatter',
						data: data.data
				}]
			});

        });
	window.onresize = myChart.resize;
    </script>
</body>
</html>
